<template>
  <div class="panel">
    <div class="panel-header">
      {{title}}
    </div>
    <slot></slot>
  </div>
</template>

<script>
  export default {
    name: 'Panel',
    props: {
      title: {
        type: String,
        default: ''
      }
    }
  }

</script>

<style lang="scss" scoped>
  .panel {
    border: 1px solid #ddd;
    border-radius: 4px;
    .panel-header {
      color: #333;
      border-color: #ddd;
      background-color: #f5f5f5;
      padding: 10px 15px;
      border-bottom: 1px solid #ddd;
      border-top-left-radius: 3px;
      border-top-right-radius: 3px;
    }
    .form-horizontal {
      max-width: 550px;
      /*max-height: 80%;*/
      padding-top: 20px;
      padding-left: 40px;
      padding-bottom: 120px;
    }
  }
</style>
